<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="../assets/css/style.css" />
</head>

<body>
    <div id="app">
        <div class="container">
            <span id="message">{{ msg|json }}</span>
        </div>
        <div class="container">
            <div class="account-info">
                <span v-if="userName">{{ userName }} | <a href="#" @click="logout">注销</a></span>
            </div>
        </div>

        <div class="container">
            <div class="form-group">
                <label>电子邮箱</label>
                <input type="text" v-model="loginModel.userName" />
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="text" v-model="loginModel.password" />
            </div>
            <div class="form-group">
                <label></label>
                <button @click="login">登陆</button>
            </div>
        </div>

        <div class="container text-center">
            <div>
                <button @click="callApi">api</button>
            </div>
            <div class="result">
                {{result|json}}
            </div>
        </div>
    </div>
</body>

<script src="../assets/js/vue.js"></script>
<script src="../assets/js/zepto.js"></script>
<script src="../assets/js/vue-resource.js"></script>
<script>
    	Vue.http.options.emulateJSON = true
		Vue.http.options.root = 'http://localhost:6688'
    var vue = new Vue(
        {

            el: "#app",
            data: {
                loginUrl: 'http://localhost:6688/token',
                logutUrl: 'http://localhost:6688/api/Account/Logout',
                apiUrl: 'http://localhost:6688/api/Values',
                loginModel: {
                    userName: '',
                    password: '',
                    grant_type: 'password'
                },
                msg: '',
                userName: '',
                result: ''
            },
            methods: {
                login: function () {
                    var vm = this;
                    vm.msg = '';
                    this.$http.post(this.loginUrl, this.loginModel)
                        .then((response) => {
                            var data = response.json();
                            this.msg = '登陆成功';
                            sessionStorage.setItem('accessToken', data.access_token)
                            sessionStorage.setItem('userName', data.userName)
                            userName=data.userName;
                        }).catch(this.requestError)
                },
                requestError: function (response) {
                    this.msg = response.json()
                },
                logout: function () {
                    headers = {}
                    headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken');
                    var vm = this;
                    THIS.$http.post(this.logutUrl).then((response) => {
                        this.msg = '注销成功';
                        this.userName = '';
                        sessionStorage.removeItem('userName')
                        sessionStorage.removeItem('accessToken')
                    }).catch(this.requestError)
                },
                getSessionStorage: function () {
                    return vm.userName;
                },
                callApi: function () {
                    var vm = this;
                    vm.msg = '';
                    vm.result = '';
                    var headers = {}
                    headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken')
                    this.$http.get(this.apiUrl, {
                            headers: headers
                        })
                        .then((response) => {
                            this.result = response.json()
                        }).catch(this.requestError)
                }
            }
        }
    );

</script>

</html>